import React, { useState } from 'react'
import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { AtButton, AtInput } from 'taro-ui'
import env from '../../store/env.config'

import './login.scss'

const Login: React.FC = () => {
  const [userName, setUserName] = useState('' as any)
  const [password, setPassword] = useState('' as any)
  const [isLogin, setIsLogin] = useState(true)
  const login = () => {
    if (!isLogin) {
      setIsLogin(true)
      return
    }
    if (userName === '') {
      Taro.showToast({
        title: '用户名不能为空',
        icon: 'error',
        duration: 1000,
      })
      return
    }
    if (password === '') {
      Taro.showToast({
        title: '密码不能为空',
        icon: 'error',
        duration: 1000,
      })
      return
    }
    console.log('login')
    logining()
  }

  const logining = () => {
    Taro.showLoading({
      title: '登陆中',
    })

    Taro.request({
      url: `${env.domain}/user/login`,
      method: 'POST',
      data: {
        username: userName,
        password: password,
      },
      success: (res) => {
        if (res.data.code == 200 && res.data.data !== null) {
          let resUserInfo = res.data.data
          setTimeout(function () {
            Taro.hideLoading()
          }, 2000)
          setTimeout(() => {
            Taro.setStorage({
              key: 'userInfo',
              data: resUserInfo,
            })
            Taro.switchTab({
              url: '/pages/index/index',
            })
          }, 500)
          return
        }
        setTimeout(function () {
          Taro.hideLoading()
        }, 1000)
        Taro.showToast({
          title: '登陆失败',
          icon: 'error',
          duration: 2000,
        })
      },
    })
  }

  const reset = () => {
    setPassword('')
    setUserName('')
  }
  return (
    <View className='login-back'>
      <View className='title'></View>
      <AtInput
        name='username'
        title='用户名'
        type='text'
        placeholder='请输入用户名'
        value={userName}
        required={true}
        onChange={(val) => {
          setUserName(val)
        }}
      />
      <AtInput
        name='password'
        title='密码'
        type='password'
        placeholder='请输入密码'
        value={password}
        required={true}
        onChange={(val) => {
          setPassword(val)
        }}
      />

      <View className='at-row' style={{ marginTop: '20px' }}>
        <View className='at-col at-col-1'></View>
        <View className='at-col at-col-4'>
          <AtButton onClick={reset} type='secondary'>
            重置
          </AtButton>
        </View>
        <View className='at-col at-col-2'></View>
        <View className='at-col at-col-4'>
          <AtButton
            onClick={() => {
              Taro.reLaunch({
                url: '/pages/reg/reg',
              })
            }}
            type='primary'
          >
            去注册
          </AtButton>
        </View>
        <View className='at-col at-col-1'></View>
      </View>
      <View style={{ margin: '20px 10px' }}>
        <AtButton onClick={login} type='primary'>
          登陆
        </AtButton>
      </View>
    </View>
  )
}

export default Login
